<template>
  <div class="Invoicing login createDemand">
    <div class="underline" style="width:120px;">
      <span class="title1 color1 zIndex fontBold">企业管理</span>
    </div>
    <div class="login_content">
      <div class="content">
        <div class="login_field">
          <van-cell-group>
            <van-field v-model="form.company" center readonly disabled>
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业名称</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field v-model="select.group" center is-link readonly @click="showGroup">
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业层级</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field v-if="groupStatus || form.group == 2" v-model="form.group_name" center
              @update:model-value="updateValue">
              <template #left-icon>
                <span class="content3 font400 color3 leftw">集团公司</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field v-model="form.address" center>
              <template #left-icon>
                <span class="content3 font400 color3 leftw">通讯地址</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field center readonly>
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业LOGO</span>
                <span class="line content3 font400 color3">|</span>
              </template>
              <template #button>
                <div class="flex align_center">
                  <img v-if="form.head_img" class="uploaded-img" :src="form.head_img">
                  <van-uploader :after-read="onRead" :max-count="1">
                    <van-button color="#12142E" size="small" type="primary">
                      上传
                    </van-button>
                  </van-uploader>
                </div>
              </template>
            </van-field>
            <!-- <van-field
              center
              readonly
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业图片</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field> -->
            <!-- <van-field
              center
              readonly
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业图片</span>
                <span class="line content3 font400 color3">|</span>
              </template>
              <template #button>
                <van-button
                  color="#12142E"
                  size="small"
                  type="primary"
                >
                  上传
                </van-button>
              </template>
            </van-field> -->
            <div class="desc">
              <div class="content3 font400 color3">
                企业简介
              </div>
              <van-field class="textarea" v-model="form.content" type="textarea" :autosize="{ minHeight: 120 }"
                placeholder />
            </div>
            <div>
              <UploadImg :file-list="fileList" :count="6" :type="2" @uploaderImgs="uploaderImgs"
                @detaleImgs="detaleImgs" />
            </div>
          </van-cell-group>
          <van-row class="listst" type="flex" justify="center" v-show="showSettled">
            <van-col span="24">
              <div class="items" v-for="(item, index) in EnterpriseInfo" :key="index" @click="chVal(item.company_name)">
                <p>名称:{{ item.company_name }}</p>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="font400 content3 color4" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div @click="submit" class="agree font400 content3 color4">
        提交
      </div>
    </div>
  </div>
  <Choose :columns="columns" :visible="visible" :type="type" @closeDialog="closeDialog" @confirmValue="confirmValue" />
</template>

<script setup lang="ts">
import _ from 'lodash'
import axios from 'axios'
import { getToken } from '@/service/cookie'
import { Toast, Dialog } from 'vant'
import { ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { companylEdit, companyQueryName, companyInfo } from '@/api'
const UploadImg = defineAsyncComponent(() => import('@/components/UploadImg/index.vue'))
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const router = useRouter()
const store = useStore()
const fileList: any = ref([])
const groupStatus: any = ref(false)
const showSettled: any = ref(false)
const EnterpriseInfo: any = ref([])
const columns: any = ref([])
const visible: any = ref(false)
const type: any = ref(0)
const form: any = ref({
  morepic: [],
  content: '',
  head_img: '',
  group: '',
  group_name: '',
  address: ''
})
const select = ref({
  type: '',
  group: '',
  level: '',
  economic: '',
  role: ''
})

const getData = async () => {
  form.value = await companyInfo()
  select.value.group = form.value.group === 1 ? '集团公司' : '项目公司'
  form.value.morepic.forEach((item: any) => {
    fileList.value.push({
      url: item
    })
  })
}

getData()

const showGroup = () => {
  columns.value = ['集团公司', '项目公司']
  visible.value = true
  type.value = 2
}

const chVal = async (i: any) => {
  form.value.group_name = i
  showSettled.value = false
}

const updateValue = async () => {
  const { list }: any = await companyQueryName({ company_name: form.value.group_name })
  if (list.length > 0) {
    EnterpriseInfo.value = list
    showSettled.value = true
  } else {
    showSettled.value = false
  }
}

const uploaderImgs = (val: any, type: any) => {
  if (type === 2) {
    val.forEach((item: any) => {
      if (form.value.morepic.indexOf(item) !== -1) {
        form.value.morepic.splice(item, 1)
      } else {
        form.value.morepic.push(item)
      }
    })
  }
}

const closeDialog = () => {
  visible.value = false
}

const confirmValue = (val: any, type: any, index: any) => {
  if (type === 1) {
    form.value.type = index + 1
    select.value.type = val
  } else if (type === 2) {
    form.value.group = index + 1
    select.value.group = val
    groupStatus.value = !!index
  } else if (type === 3) {
    form.value.level = val.id
    select.value.level = val.name
  } else if (type === 4) {
    form.value.economic = val.id
    select.value.economic = val.name
  }
  visible.value = false
}

const detaleImgs = (val: any, type: any) => {
  form.value.morepic.splice(val, 1)
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const onRead = async (file: any) => {
  const formData = new FormData()
  formData.append('file', file.file)
  uploadFile(formData)
}

const uploadFile = async (formData: any) => {
  axios({
    method: 'post',
    url: import.meta.env.VITE_API_BASEURL + 'v1/common/upload',
    data: formData,
    headers: { 'Content-Type': 'multipart/form-data', authorization: getToken('token') }
  }).then((res: any) => {
    form.value.head_img = res.data.data.url
  })
}

const submit = _.throttle(async () => {
  try {
    await companylEdit({ ...form.value })
    Dialog.alert({
      title: '温馨提示',
      message: '修改成功'
    }).then(() => {
      back()
    })
  } catch (error: any) {
    Toast(error.message)
  }
  // router.push('/otherServices/information')
}, 2000)

</script>

<style lang="less" scoped>
.Invoicing {
  padding: 0 30px 80px;
  margin-top: 40px;

  .login_content {
    margin-top: 20px;

    .login_field {
      margin-top: 20px;
      position: relative;
    }
  }

  .leftw {
    width: 90px;
    display: inline-block;
  }

  .line {
    margin: 0 30px;
  }

  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }

  .desc {
    background-color: #fff;
    padding: 15px;
    padding-left: 15px;
    border-radius: 5px;

    .content3 {
      margin-bottom: 15px;
    }
  }
}

.uploaded-img {
  width: 60px;
  height: 30px;
  object-fit: cover;
  margin-right: 10px;
}

.listst {
  width: 90%;
  margin: 0 auto;
  position: absolute;
  top: 160px;
  left: 50%;
  z-index: 99;
  background-color: #f8f8f8;
  transform: translateX(-50%);
  border: 1px solid #666;

  .items {
    border-bottom: 1px solid #333;
    padding: 15px 5px;

    p {
      margin: 5px;
    }
  }

  .items:last-child {
    border-bottom: none;
  }
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;

    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }

    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

@media (min-width: 750px) {
  .Invoicing {
    padding: 0 30px 80px;
    margin-top: 40px;

    .login_content {
      margin-top: 20px;

      .login_field {
        margin-top: 20px;
        position: relative;
      }
    }

    .leftw {
      width: 90px;
      display: inline-block;
    }

    .line {
      margin: 0 30px;
    }

    .setBnt {
      width: 98px;
      height: 30px;
      background: #12142e;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 400;
    }

    .desc {
      background-color: #fff;
      padding: 15px;
      padding-left: 15px;
      border-radius: 5px;

      .content3 {
        margin-bottom: 15px;
      }
    }
  }

  .uploaded-img {
    width: 60px;
    height: 30px;
    object-fit: cover;
    margin-right: 10px;
  }

  .listst {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 160px;
    left: 50%;
    z-index: 99;
    background-color: #f8f8f8;
    transform: translateX(-50%);
    border: 1px solid #666;

    .items {
      border-bottom: 1px solid #333;
      padding: 15px 5px;

      p {
        margin: 5px;
      }
    }

    .items:last-child {
      border-bottom: none;
    }
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 30px;
      height: 100%;
      text-align: center;

      .agree {
        width: 242px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }

      .icon {
        width: 23px;
        height: 23px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
